import React from 'react';
import { Switch, Balloon } from '@teamix/ui';
import { ButtonIcon } from '@alife/devops-ui';
import docs from 'utils/docs';
import SwitchConfirm from './switchSyncAdmins';
import intl from 'locale';

function SyncAdminSwitch(props) {
  const { isOrgOwner, isGetSetting, onChange, auto_sync_member_enable } = props;

  return (
    <div className="sync-admin-subtitle-switch">
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <span>
          {intl.get({
            id: 'code-assets.admins.containers.root.WithBuyunEffectEnterpriseAdministrator',
            defaultMessage: '同步云效企业管理员',
          })}
        </span>
        <Balloon
          closable={false}
          type="normal"
          trigger={
            <ButtonIcon
              text
              name="question-line"
              style={{ marginLeft: 4, display: 'inline-block' }}
            />
          }
          align="t"
          popupContainer={(trigger) => trigger.parentNode}
        >
          <a href={docs('synchronizationAdministrator')} target="_blank" rel="noreferrer">
            {intl.get({
              id: 'code-assets.admins.containers.root.SynchronizationRuleDescription',
              defaultMessage: '同步规则说明',
            })}
          </a>
        </Balloon>
      </div>
      {isOrgOwner ? (
        <SwitchConfirm
          trigger={<Switch checked={auto_sync_member_enable} loading={isGetSetting} />}
          onChange={onChange}
          needPopConfirm={auto_sync_member_enable}
        />
      ) : (
        <Balloon.Tooltip
          trigger={
            <div style={{ position: 'relative', top: '-1px' }}>
              <Switch checked={auto_sync_member_enable} loading={isGetSetting} disabled />
            </div>
          }
          align="t"
          popupContainer={(trigger) => trigger.parentNode}
        >
          {intl.get({
            id: 'code-assets.admins.containers.root.YouAreNotAuthorizedTo',
            defaultMessage: '无操作权限，请联系企业拥有者处理',
          })}
        </Balloon.Tooltip>
      )}
    </div>
  );
}

export default SyncAdminSwitch;
